<div class="alert-overlay" style="width:100%;height:100%">
	<div class="alert-header">
		ALERT
	</div>
	<div class="alert-content flex flex-row">
		<div class="alert-video" style="width:50%;height:100%">
			<mat-video [loop]="true" [overlay]="false" [autoplay]="true" [preload]="true" [fullscreen]="true"
					   [download]="false" color="accent" spinner="spin">
				<source matVideoSource [src]="currentAlert?.videoURL" type="video/mp4">
			</mat-video>
		</div>
		<div class="alert-info" style="width:50%;height:100%">
			<div class="alert-info-details">
				<div class="alert-info-item flex">
					<div class="alert-item-left text-ellipsis">Alert ID :</div>
					<div class="alert-item-right text-ellipsis">{{currentAlert?.alertID}}</div>
				</div>
				<div class="alert-info-item flex">
					<div class="alert-item-left text-ellipsis">Road Name:</div>
					<div class="alert-item-right text-ellipsis">{{currentAlert?.roadName}}</div>
				</div>
				<div class="alert-info-item flex">
					<div class="alert-item-left text-ellipsis">Time:</div>
					<div class="alert-item-right text-ellipsis">{{currentAlert?.ackTime?.time | momentFormat: 'YYYY/MM/DD HH:mm'}}</div>
				</div>
			</div>
			<div class="alert-operation">
				<button [zcRepeatClick]="clickLoading" nz-button nzSize="small" nzType="primary" (click)="alertOperation(false)">Ignore</button>
				<button [zcRepeatClick]="clickLoading" nz-button nzSize="small" nzType="danger" (click)="alertOperation(true)">Verify</button>
			</div>
		</div>
	</div>
</div>
